<template>
  <section class="rankList">    
    <goback :getName='goName' :getURL ="goType" :getBtn='goBtn'></goback>
    <section class="rankNav" v-show="userInfo.channelLv>0">
      <a :class="{'current':pageType==1}" @click="changePaeg(1)">
        渠道
      </a>
      <a :class="{'current':pageType==2}" @click="changePaeg(2)">
        会员
      </a>
    </section>
    <!-- 渠道 -->
    <section class="channel" v-show="pageType == 1">
      <dl>
        <dd class="channelMe" v-for="(rankListMe,index) in rankList" :key="index" v-if='rankListMe.id == userInfo.id'>
          <section class="channel_left">
            <span>
            <!-- {{rankListMe.ranking}} -->
            </span>
            <div class="userImg">
              <img v-bind:src="rankListMe.img" alt="用户头像">
            </div>
            <div>
              <span>
                {{rankListMe.nick}}
              </span>
            <br>
            <span>
              第
              {{rankListMe.ranking}}
              名
            </span>
            </div>
          </section>
          <div class="earnings">
            <span>
              {{rankListMe.earnings}}
            </span>
            元
          </div>
        </dd>
        <dd class="rank_dd" v-for="(rankListMe,index) in rankList" :key="index" v-if='rankListMe.id !== userInfo.id'>
          <section class="channel_left">
            <span>
            {{rankListMe.ranking}}
            </span>
            <div class="userImg">
              <img v-bind:src="rankListMe.img" alt="用户头像">
            </div>
            <div>
              <span>
                {{rankListMe.nick}}
              </span>
            </div>
          </section>
          <div class="earnings">
            <span :class="{'EE9993E':rankListMe.ranking == 1}">
              {{rankListMe.earnings}}
            </span>
            元
          </div>
        </dd>
      </dl>
    </section>
    <!-- 会员排行 -->
    <section class="members" v-show="pageType == 2">
      <section class="members_headImg" ref="members_headImg" :style="{backgroundImage: 'url(' + rankList[0].img + ')',height:membersHeadImg}">
        <div class="menber_pop">

        </div>
        <section class="_img_section" ref="_img_section" :style="{height:membersPhoto}">
          <img v-bind:src="rankList[0].img" alt="">
        </section>
        <p class="rankingNo1">
          {{rankList[0].nick}}占领了榜首
        </p>
      </section>
      <dl>
        <dd class="membersMe">
          <section class="channel_left">
            <span>
            <!-- {{rankListMe.ranking}} -->
            </span>
            <div class="userImg">
              <!-- <img v-bind:src="rankList[0].img" alt="用户头像"> -->
            </div>
            <div>
              <span>
                {{rankMyList.beyondNum}}
              </span>
            <br>
            <span>
              第
              {{rankMyList.position}}
              名
            </span>
            </div>
          </section>
          <div class="earnings">
            <span>
              {{rankMyList.position}}
            </span>
            元
          </div>
        </dd>
        <dd class="rank_dd" v-for="(rankListMe,index) in rankList" :key="index" v-if='rankListMe.id !== userInfo.id'>
          <section class="channel_left">
            <span>
            {{rankListMe.ranking}}
            </span>
            <div class="userImg">
              <img v-bind:src="rankListMe.img" alt="用户头像">
            </div>
            <div>
              <span>
                {{rankListMe.nick}}
              </span>
            </div>
          </section>
          <div class="earnings">
            <span :class="{'EE9993E':rankListMe.ranking == 1}">
              {{rankListMe.earnings}}
            </span>
            元
          </div>
        </dd>
      </dl>
    </section>
  </section>
</template>
<script>
import { userInfoGet } from '../../libs/publicMethod'
import { getRewardRank, getMyRank } from '../../libs/interface'
import goback from '../../components/goback'
  export default {
    components:{ userInfoGet, goback,  getRewardRank, getMyRank },
    data () {
      return{
        userInfo: userInfoGet(), // 用户信息
        pageType: 1, // 默认为1
        membersHeadImg:0,
        membersPhoto:0,
        goName:'返回',
        rankMyList:{},
        goType:'',
        goBtn:'',
        rankList: [
          {
            ranking:1,
            nick:'玩宝',
            id:2039,
            img:'http://thirdwx.qlogo.cn/mmopen/HdUhofEFKPriaibOoYZXq8mKOWh5GtVFZYNG9Q6rgBHa1sTN6ibo5aHrw1B2jLERqwTq2icrbO0YQ7xbwop6ocD8zVbibEH4GfZTH/64',
            earnings:100
          },
          {
            ranking:1,
            nick:'玩宝',
            id:2038,
            img:'http://thirdwx.qlogo.cn/mmopen/HdUhofEFKPriaibOoYZXq8mKOWh5GtVFZYNG9Q6rgBHa1sTN6ibo5aHrw1B2jLERqwTq2icrbO0YQ7xbwop6ocD8zVbibEH4GfZTH/64',
            earnings:1100
          },
          {
            ranking:2,
            nick:'玩宝',
            id:2037,
            img:'http://thirdwx.qlogo.cn/mmopen/HdUhofEFKPriaibOoYZXq8mKOWh5GtVFZYNG9Q6rgBHa1sTN6ibo5aHrw1B2jLERqwTq2icrbO0YQ7xbwop6ocD8zVbibEH4GfZTH/64',
            earnings:1000
          },
          {
            ranking:2,
            nick:'玩宝',
            id:2037,
            img:'http://thirdwx.qlogo.cn/mmopen/HdUhofEFKPriaibOoYZXq8mKOWh5GtVFZYNG9Q6rgBHa1sTN6ibo5aHrw1B2jLERqwTq2icrbO0YQ7xbwop6ocD8zVbibEH4GfZTH/64',
            earnings:1000
          },
          {
            ranking:2,
            nick:'玩宝',
            id:2037,
            img:'http://thirdwx.qlogo.cn/mmopen/HdUhofEFKPriaibOoYZXq8mKOWh5GtVFZYNG9Q6rgBHa1sTN6ibo5aHrw1B2jLERqwTq2icrbO0YQ7xbwop6ocD8zVbibEH4GfZTH/64',
            earnings:1000
          }
        ]
      }
    },
    mounted(){      
      // 判断是渠道还是用户
      switch(this.$route.params.id){
        case '1':
          this.pageType=1
          break;
        case '2':
          this.membersHeadImg = window.document.body.clientWidth*0.48 + 'px';
          this.membersPhoto = window.document.body.clientWidth*.16 + 'px';
          this.pageType=2
          break;
      }
      // 获取我的排行
      this.getMyList();
    },
    methods:{
      changePaeg(val){
        let vm = this;
        if(val == vm.$route.params.id) return
        if(val == 2) {          
          this.membersHeadImg = window.document.body.clientWidth*0.48 + 'px';
        }
        vm.$router.replace('/rankList/'+val)
        vm.pageType = val;
      },
      // 获取我的排行
      getMyList(){
        let vm = this
        let params = {
          activityid:1,
          memberid: userInfoGet().id
        }
        getMyRank(params, (data) => {
          if(data.code == 1) {
            vm.rankMyList = data.payload
          }
          console.log(data)
        })
      },
      // 获取整体排行
      getAllRank(){
        let vm = this;
        let params = {
          
        }
        getRewardRank(params, (data) => {
          console.log(data)
        })
      }
    }
  }
</script>
<style>
/* 头部 */
.rankNav{  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.rankNav a{
  width: 50%;
  padding: 1rem;
  background: white;
  color: #C9C9C9;
}
/* 内容 */
.current{
  color: white !important;
  background-color: #E93B3D !important;
}
/* 渠道样式 */
.channel dd{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background-color: white;
  padding: .5rem;
  margin-top: .1rem;
}
.channelMe{
  margin-bottom: 1rem;
}
.channel_left{
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  text-align: center;
  width: 80%
}
.channel_left div{
  text-align: left;
}
.channel_left span:nth-child(1){
  width: 10%;
}
.userImg{
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  margin: 0 5%;
  overflow: hidden;
}
.userImg img{
  width: 100%;
  height: 100%;
}
.earnings span{
  color: #E93B3D;
}
.EE9993E{
  color: #E9993E !important;
}
/* 会员样式 */
.members_headImg{
  position: relative;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.menber_pop{
  position: absolute;
  width:100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.3);
}
._img_section{
  position: relative;
  z-index: 2;
  width: 16%;
  border-radius: 50%;
  overflow: hidden;
}
._img_section img{
  width: 100%;
  height: 100%;
}
.rankingNo1{  
  position: relative;
  margin-top: 3%;
  z-index: 2;
  color: white;
}
.members dd{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background-color: white;
  padding: .5rem;
  margin-top: .1rem;
}
.membersMe{  
  margin-bottom: 1rem;
}
</style>

